Explore the possibilities of p5.js with short examples.
White circles on a black background, with varying degrees of transparency.
Mobile Device Movement
Animate based on device motion.
A point on the unit circle, together with the corresponding sine and cosine values on their graphs.
Sine and Cosine
Animate circular, back and forth, and wave motion.
A sphere of dark purple cubes on a light pink background.
Orbit Control
Control the camera with the mouse.
Rainbow colored smoke angled towards the right of the canvas, with a white arrow above the smoke pointing right.
Smoke Particles
Simulate smoke with a particle system.
A few basic shapes drawn in white and black over a grey background.
Shape Primitives
Draw 2D shapes.
A few basic shapes drawn in different colors over a blue background.
Color
Add color to your sketch.
A squiggly rainbow line on a black background.
Drawing Lines
Draw with the mouse.
A small green circle on a black background.
Animation with Events
Pause and resume animation.
A small black circle on a rainbow, lattice-shaped path, on top of a grey and white striped background.
Conditions
Use if and else statements to make decisions while your sketch runs.
Three columns of the words “ichi,” “ni,” “san,” and “shi” on a white background. The first column is right aligned, the middle column is center aligned, and the left column is left aligned.
Words
Load fonts and draw text.
Black-and-white photograph of a parrot. A curvy line is drawn across the image; within the confines of that line, color is added to the photograph.
Copy Image Data
Paint from an image file onto the canvas.
Two leaf sprigs side by side on a white background. The right sprig is labeled "Mask." The left sprig is labeled "Masked Image," and uses the shape of the right sprig to mask a photograph of tulips.
Alpha Mask
Use one image to cut out a section of another image.
An astronaut on a planet as the background with a slightly transparent version of this image overlaid and to the left.
Image Transparency
Make an image translucent on the canvas.
A close up of an audio player timestamp, reading "0:00 / 2."
Audio Player
Create a player for an audio file.
A screenshot of a video of a hand, with the pointer finger touching a desk.
Video Player
Create a player for a video file.
Two overlaid screenshots of a video of a hand, with the pointer finger touching a desk. Text to the top right of the screenshot reads "Click the canvas to start and pause the video feed."
Video on Canvas
Display and stylize a video on the canvas.
An inverse, black and white photograph of trees.
Video Capture
Display a live video feed from a camera.
A grey background with white text reading "Drag an image file onto the canvas."
Image Drop
Display an image that the page visitor dragged and dropped.
An input field with a submit button, labeled "Hello, p5!"
Input and Button
Use text input from the page visitor.
A survey on a yellow background, consisting of an input field, radio buttons, and a dropdown.
Form Elements
Create a form and respond to the results.
Green and blue geometric shapes on a black background.
Translate
Move the coordinate system origin.
Line segments rotated around center of canvas.
Rotate
Rotate the coordinate system.
Solid rectangles stacked on top of one another.
Scale
Modify the coordinate system scale.
A small white circle on a grey background.
Linear Interpolation
Convert a number between 0 and 1 to another range.
A large yellow circle on a black background.
Map
Convert a number from one range to another range.
A small purple circle on a black background.
Random
Get random numbers.
A small white circle in a pink rectangle.
Constrain
Keep a number within a range.
A pink clock on a grey background.
Clock
Get the current time.
Horizontal stripes fading between light green at the top and dark blue at the bottom.
Color Interpolation
Fade between two colors.
Small circles, each with a different color, arranged in a circular path, displaying hues across the color spectrum.
Color Wheel
Create a visualization of the color spectrum.
Ten rainbow-colored lines in a bezier curve formation.
Bezier
Draw a set of curves.
Dark grey canvas that reflects the lines drawn within it in symmetrical sections.
Kaleidoscope
Draw mirrored designs with the mouse.
Black and white abstract noise texture.
Noise
Generate naturalistic textures using Perlin noise.
A rainbow fractal tree on a black background.
Recursive Tree
Draw a tree using a function that calls itself.
A random series of words related to p5.js scattered on a maroon background.
Random Poetry
Generate a poem with words randomly selected from a bank.
Two eyes on a black background.
Aim
Rotate toward a point.
Rainbow ring made up of triangles whose vertices lie on two concentric circles.
Triangle Strip
Split a ring into triangles.
Large purple circle on a grey background.
Circle Clicker
Make a game about clicking a circle quickly and save the high score.
Two narrow white rectangles and a white square representing the paddles and ball in a game of ping pong.
Ping Pong
Make a game inspired by Atari's Pong.
A narrow green L shape and a red square representing the snake and fruit in the arcade game Snake.
Snake
Make a game based on Snake arcade games.
Eight 3D shapes; a plane, box, cylinder, cone, torus, sphere, ellipsoid, and a model of an astronaut. The surface of the shapes are multicolored.
Geometries
Draw 3D shapes, including a custom model.
A tiled plane of snake models.
Custom Geometry
Generate a 3D shape programmatically.
Astronaut 3D model on a black background.
Materials
Change 3D objects' color, texture, and how they respond to light.
A screenshot of a video of a city crosswalk, with offset colors.
Filter Shader
Manipulate imagery with a shader.
A red-to-blue waving ribbon on a white background.
Adjusting Positions with a Shader
Use a shader to adjust shape vertices.
A row of five orange spheres. The closest and farthest spheres from the camera appear blurred.
Framebuffer Blur
Simulate a camera's depth of field.
Black canvas with a very dark grey rectangle in the middle. A white circle is at the edge of the rectangle.
Create Graphics
Draw imagery off-screen.
Two curving lines made of repeating white circles and squares with black outlines, on a black and white background.
Multiple Canvases
Use Instance Mode to put multiple canvases on the page.
Two spheres broken up into a square grid with a gradient in each grid.
Shader as a Texture
Generate a texture for a 3D shape using a shader.
Snowflakes falling on a black background.
Snowflakes
Animate snowfall.
Twenty white circles on a black background.
Shake Ball Bounce
Animate ball movement based on mobile device motion.
A pattern of multicolored circles connected by white lines, on a black background.
Connected Particles
Draw circles and connecting lines using the mouse.
A group of bird-like objects, represented by rainbow triangles, modeling flocking behavior.
Flocking
Simulate bird flocking behavior.
Black outlines of circles on a white background. Text below the circles reads "Click and drag to add bubbles."
Local Storage
Save data from the browser on the device.
JSON
Store data in JavaScript object notation.
Table
Store data as comma-separated values.
A small green circle hovering over a yellow tilted plane at the bottom of the canvas.
Non-Orthogonal Reflection
Simulate a ball bouncing on a slanted surface.
A yellow pentagon on a black background.
Soft Body
Simulate the physics of a soft body accelerating toward the mouse.
9 multicolored circles at varying heights on a grey background.
Forces
Simulate forces on multiple bodies as they move through liquid.
Grid of squares made of black lines on a white background. Some squares are filled in with solid black.
Game of Life
Recreate John Conway's cellular automaton.
Colorful rendering of the Mandelbrot set.
Mandelbrot Set
Visualize a mathematical set that produces fractal structures.
Looking for the old p5.js site? Find it here!